<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
      *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
	  .box img{
		  width: 1920px;
	  }
      .box{
        width: 1920px;
        height: 425px;
        /*border: 3px  red solid;*/
        margin: 200px auto;
        overflow: hidden;
        position: relative;
      }
      .list{
        list-style: none;
        display: flex;
        position: absolute;
        left: 0;
      }


    </style>
</head>
<body>
    <div class="box" id="box">
      <ul class="list">
        <li class="s"><img src="1.png" alt=""></li>
        <li class="s"><img src="2.jpg" alt=""></li>
        <li class="s"><img src="3.jpg" alt=""></li>
        <li class="s"><img src="4.png" alt=""></li>
      </ul>
    </div>
    <script>
        let w = 1920
        // let box = window.document.querySelector('.box')
        let count = 0
        let list = window.document.querySelector('.list')
        let li = window.document.querySelectorAll('.s')
        let time;
        function next() {
          let first = list.firstElementChild.cloneNode(true)
          let end = list.lastElementChild.cloneNode(true)
            list.appendChild(first)
            // list.insertBefore(end,list.firstElementChild)
          time = setInterval(function () {
              count++
              list.style.left=w*count*-1+'px'
              list.style.transition='left 1s';
            if (count===li.length){
                setTimeout(function () {
                    count=0
                    list.style.left=0+'px'
                    list.style.transition='none'
                },1000)
            }
          },1000)
        }
        next()

    </script>
</body>
</html>